<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <!--<script src="highcharts.js" type="text/javascript"></script>-->
    <script src="../../lib/js/jquery.min.js"></script>
    <script src="highcharts.js"></script>
    <script src="data.js"></script>
    <script src="exporting.js"></script>

    <!-- Additional files for the Highslide popup effect -->
    <script type="text/javascript" src="highslide-full.min.js"></script>
    <script type="text/javascript" src="highslide.config.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="highslide.css" />
    <title>Chart</title>
    <style type="text/css">
        .wrapper{ width:900px; margin:0 auto; overflow-x:scroll;}
    </style>
</head>
<body>
<div class="wrapper">
    <div id="container" style="min-width:310px; width:900px; height:400px; margin:0 auto"></div>
</div>
<script>
//    var datas = "\nDay,Visits,Unique Visitors\n3/9/13,5691,4346\n3/10/13,5403,4112\n3/11/13,15574,11356\n3/12/13,16211,11876\n3/13/13,16427,11966\n3/14/13,16486,12086\n3/15/13,14737,10916\n3/16/13,5838,4507\n3/17/13,5542,4202\n3/18/13,15560,11523\n3/19/13,18940,14431\n3/20/13,16970,12599\n3/21/13,17580,13094\n3/22/13,17511,13234\n3/23/13,6601,5213\n3/24/13,6158,4806\n3/25/13,17353,12639\n3/26/13,17660,12768\n3/27/13,16921,12389\n3/28/13,15964,11686\n3/29/13,12028,8891\n3/30/13,5835,4513\n3/31/13,4799,3661\n4/1/13,13037,9503\n4/2/13,16976,12666\n4/3/13,17100,12635\n4/4/13,15701,11394\n4/5/13,14378,10530\n4/6/13,5889,4521\n4/7/13,6779,5109\n4/8/13,16068,11599\n";

    var datas = "\nDay,PV\n14:20:31,5791\n14:20:31,5691\n14:20:31,5891\n14:20:31,5691\n14:20:31,5991\n14:20:31,6691\n14:20:31,6791\n14:20:31,6891\n14:20:31,6941\n14:20:31,7091\n14:20:31,7311\n14:20:31,7191\n14:20:31,7391\n14:20:31,6691\n14:20:31,7291\n14:20:31,7691\n14:20:31,7291\n14:20:31,7891\n14:20:31,7191\n14:20:31,5791\n14:20:31,5691\n14:20:31,5891\n14:20:31,5691\n14:20:31,5991\n14:20:31,6691\n14:20:31,6791\n14:20:31,6891\n14:20:31,6941\n14:20:31,7091\n14:20:31,7311\n14:20:31,7191\n14:20:31,7391\n14:20:31,6691\n14:20:31,7291\n14:20:31,7691\n14:20:31,7291\n14:20:31,7891\n14:20:31,7191\n";
    
    $(function () {
        $('#container').highcharts({
            data: {
                csv: datas,
                parseDate: function (s) {
                    var match = s.match(/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{2})$/);
                    /*if (match) {
                        return Date.UTC(+('20' + match[3]), match[1] - 1, + match[2]);
                    }*/
                }
            },
            title: {
                text: '性能统计'
            },
            subtitle: {
                text: 'Analytics'
            },
            xAxis: {
                
                //type: 'datetime',
                /*dateTimeLabelFormats: {
                    second: '%H:%M:%S'
                },*/
                tickInterval: 24 * 3600 * 1000, //7 * 24 * 3600 * 1000, // one week
                tickWidth: 0,
                gridLineWidth: 1,
                labels: {
                    align: 'left',
                    x: 3,
                    y: -3
                }
            },
            yAxis: [{ // left y axis
                title: {
                    text: null
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }, { // right y axis
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                title: {
                    text: null
                },
                labels: {
                    align: 'right',
                    x: -3,
                    y: 16,
                    format: '{value:.,0f}'
                },
                showFirstLabel: false
            }],
            legend: {
                align: 'left',
                verticalAlign: 'top',
                y: 20,
                floating: true,
                borderWidth: 0
            },
            tooltip: {
                shared: true,
                crosshairs: true
            },
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        /*events: {
                            click: function (e) {
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: e.pageX,
                                        y: e.pageY
                                    },
                                    headingText: this.series.name,
                                    maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
                                            this.y +' 浏览量',
                                    width: 200
                                });
                            }
                        }*/
                    },
                    marker: {
                        lineWidth: 1
                    }
                }
            },
            series: [{
                name: '浏览量',
                lineWidth: 4,
                marker: {
                    radius: 4
                }
            }]
        });
    });
</script>
</body>
</html>
